Brijesh's Git Server — sse-from-child-process @ b275cf2bdcf600622dcb0d6a37bbaf95c575a3e0

client/app/[taskId]/page.tsx (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 107
 
// 'use client';

// import { useState, useEffect, use } from 'react'
// import { useRouter } from 'next/navigation'

// export default function TaskPage({ params }: { params: Promise<{ taskId: string }> }) {
//   const [updates, setUpdates] = useState<string[]>([])
//   const router = useRouter()
//   const taskId = use(params).taskId

//   useEffect(() => {
//     // Clear updates on mount
//     setUpdates([])

//     // Start listening for updates
//     const eventSource = new EventSource(`http://localhost:4000/api/task-updates/${taskId}`)
    
//     eventSource.onmessage = (event) => {
//       const update = JSON.parse(event.data)
//       // Only add the update if it's not already in the array
//       if (!updates.includes(update.message)) {
//         setUpdates(prev => [...prev, update.message])
//       }
      
//       if (update.progress === 100) {
//         eventSource.close()
//       }
//     }
    
//     eventSource.onerror = () => {
//       eventSource.close()
//     }

//     return () => {
//       eventSource.close()
//     }
//   }, [taskId])

//   return (
//     <div style={{ padding: '20px' }}>
//       <h1>Task Details</h1>
//       <p>Task ID: {taskId}</p>
      
//       <div style={{ marginTop: '20px' }}>
//         <h2>Updates:</h2>
//         {updates.map((update, index) => (
//           <p key={index}>{update}</p>
//         ))}
//       </div>
//     </div>
//   )
// }

'use client';

import { useState, useEffect, use } from 'react'
import { useRouter } from 'next/navigation'

export default function TaskPage({ params }: { params: Promise<{ taskId: string }> }) {
  const [updates, setUpdates] = useState<string[]>([])
  const router = useRouter()
  const taskId = use(params).taskId

  useEffect(() => {
    // Clear updates only when taskId changes, not on every mount
    setUpdates([])
    
    const eventSource = new EventSource(`http://localhost:4000/api/task-updates/${taskId}`)
    
    eventSource.onmessage = (event) => {
      const update = JSON.parse(event.data)
      setUpdates(prev => {
        // Check if this message already exists in our updates
        if (prev.includes(update.message)) {
          return prev
        }
        return [...prev, update.message]
      })
      
      if (update.progress === 100) {
        eventSource.close()
      }
    }
    
    eventSource.onerror = () => {
      eventSource.close()
    }

    return () => {
      eventSource.close()
    }
  }, [taskId]) // Only taskId in dependencies, not updates

  return (
    <div style={{ padding: '20px' }}>
      <h1>Task Details</h1>
      <p>Task ID: {taskId}</p>
      
      <div style={{ marginTop: '20px' }}>
        <h2>Updates:</h2>
        {updates.map((update, index) => (
          <p key={index}>{update}</p>
        ))}
      </div>
    </div>
  )
}